<template>
	<view class="page">
		<!-- 申请信息 -->
		<view class="application_information">
			<view class="title">
				申请信息
			</view>
			<view class="applicaCampus">
				<view class="bar">
					申请医院
				</view>
				<view class="campus">
					四川省保健院北苑
				</view>
			</view>
			<view class="applicationpeople">
				<view class="bar">
					申请人
				</view>
				<view class="people" style="color: #7f7f7f;" @click="open">
					{{userInfo.name}} >
				</view>
			</view>
			<!-- 添加就诊人信息 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff" class="popup">
				<view class="popup-content">
					<!-- <text class="text">popup 内容</text> -->
					<view class="title">
						选择就诊人
					</view>
					<image class="close" @click="close" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1063.svg" mode="widthFix"></image>
					<view class="patientlists">
						<view class="patientlist" @click="select(patientInfo)">
							<view class="patient_name">
								{{patientInfo.name}}
							</view>
							<view class="patient_card">
								{{patientInfo.idcard.slice(0,4)+'****'+patientInfo.idcard.slice(-2)}}
							</view>
						</view>
						<view class="patientlist" v-for="(item,index) in familyinfo" :key="index" @click="select(item)">
							<view class="patient_name">
								{{item.name}}
							</view>
							<view class="patient_card">
								{{item.idcard.slice(0,4)+'****'+item.idcard.slice(-2)}}
							</view>
						</view>
					</view>
					<!-- 添加就诊人 -->
					<button type="primary" class="addpatient">添加就诊人</button>
				</view>
			</uni-popup>
		</view>
		<!-- 申请原因 -->
		<view class="application_reason">
			<view class="title">
				申请原因<text style="color:#FF4D4F;">*</text>
			</view>
			<!-- <uni-easyinput show-word-limit maxlength="20" class="texterea" :styles="{backgroundColor:'#f2f2f2',borderColor:'#f2f2f2'}"  type="textarea" v-model="value" placeholder="请输入项目申请原因用于医生更加准确判断,不少于20字"></uni-easyinput> -->
			<view class="textarea-container">
				<textarea class="texterea" v-model="text" @input="updateCharacterCount" minlength="20" name="" placeholder="请输入项目申请原因用于医生更加准确判断,不少于20字" id="" cols="30" rows="10"></textarea>
				<view class="character-count">
					{{ characterCount }}/{{ maxLength }}
				</view>
			</view>
		</view>
		<!-- 申请项目 -->
		<view class="applying_for">
			<view class="title">
				申请项目
			</view>
			<view class="projectlists">
				<view class="projectlist" v-for="(item,index) in medicine" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo">
								药
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：{{item.amount}}剂
					</view>
					<view class="tags">
						<view class="tag" v-for="(tag,n) in item.tags" :key="n" :style="n==1?'background-color: rgba(255, 240, 237, 1); color: #FF4D4F;':''">
							{{tag}}
						</view>
					</view>
				</view>
				<view class="projectlist" v-for="(item,index) in inspect" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo" style="background-color: rgba(255, 242, 232, 1);color: #FF7A45;">
								查
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：1次
					</view>
				</view>
				<view class="projectlist" v-for="(item,index) in test" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo" style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
								验
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：1次
					</view>
				</view>
			</view>
			<!-- 合计 -->
			<view class="amount_to">
				合计：<text style="color:#FF4D4F;">￥{{subtotal.toFixed(2)}}</text>
			</view>
		</view>
		<!-- 确认申请 -->
		<view class="confirm">
			<button class="application" @click="submit">确认申请</button>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info"  confirmText="去查看" title="申请提示" content="项目申请已提交，请耐心等待审核结果，可在开单记录中查询审核状态!" style="text-align: center;" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const medicine = reactive([])	//药品
	const inspect = reactive([])	//检查
	const test = reactive([])		//检验
	const subtotal = ref(0)			//总价
	const userInfo = ref({
		name:'',
		idcard:''
	})
	const patientInfo = ref({
		name:'',
		idcard:''
	})
	const familyinfo = reactive([
		{
			name:'',
			idcard:''
		}
	])
	onLoad((option)=>{
		medicine.push(...JSON.parse(option.medicineselects))
		inspect.push(...JSON.parse(option.vInspectlists))
		test.push(...JSON.parse(option.vExaminslists))
		subtotal.value = Number(option.subtotal)
		// 查询当前就诊人信息
		api('/appselectid',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			// console.log(res.data[0])
			userInfo.value = res.data[0]
			patientInfo.value = res.data[0]
		}).catch(err=>{
			console.log(err)
		})
	})

	// 添加就诊人
	const popup = ref(null)
	const open = () => {
		familyinfo.splice(0)
		// 查询就诊人家庭成员信息
		api('/appfamily',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			console.log(res)
			familyinfo.push(...res)
		}).catch(err=>{
			console.log(err)
		})
		popup.value.open()
	}
	// 选择就诊人
	const memberid = ref(0)
	const select = (useinfo) => {
		userInfo.value = useinfo
		popup.value.close()
		if(useinfo.member_id){
			memberid.value = useinfo.member_id
		}
	}
	const close = () => {
		popup.value.close()
	}
	// 申请原因多行文本输入框
	const characterCount = ref(0)
	const maxLength = ref(200)
	const text = ref('')
	const updateCharacterCount = () => {
	  characterCount.value = text.value.length;
	};
	
	// 确认申请
	const patientid = ref(0)
	const alertDialog = ref(null)
	const dialogConfirm = () => {
		uni.navigateTo({
			url:'/pages/Billing_record/Billing_record?patientid='+patientid.value
		})
		alertDialog.value.close()
		
	}
	const dialogClose = () => {
		console.log('取消')
		alertDialog.value.close()
	}
	const submit = () => {
		if(characterCount.value<20){
			uni.showToast({
				title:'申请原因不足吧20字',
				icon:'none'
			})
		}else{
			api('/bingapply',{
				memberid:memberid.value,
				userid:uni.getStorageSync('userid'),
				medicine:medicine,
				inspect:inspect,
				test:test,
				subtotal:subtotal.value
			},'POST').then(res=>{
				console.log(res)
				if(res.state==200){
					patientid.value = res.patientid
					alertDialog.value.open()
					api('/appselectpatientid',{
						memberid:memberid.value,
						userid:uni.getStorageSync('userid'),
					}).then(res=>{
						console.log(res.datas[0].patient_id)
						inspect.forEach(item=>{
							api('/pendingappointmentadd',{
								patient_id:res.datas[0].patient_id,
								patient:res.datas[0].name,
								project:item.title,
								status:'待预约'
							},'POST').then(res=>{
								console.log(res)
							}).catch(err=>{
								console.log(err)
							})
						})
					}).catch(err=>{
						console.log(err)
					})
				}else{
					uni.showToast({
						title:'暂未查询到就诊信息，请挂号登记后申请',
						icon:'none'
					})
				}
			}).catch(err=>{
				console.log(err)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding-bottom: 200rpx;
		box-sizing: border-box;
		.application_information{
			width: 100%;
			height: 256rpx;
			border-top: 2rpx solid #f2f2f2;
			background-color: #fff;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #333;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
			.title{
				font-size: 32rpx;
				font-weight: 700;
			}
			.applicaCampus{
				height: 40rpx;
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.bar{
					color: #7f7f7f;
				}
			}
			.applicationpeople{
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;
				cursor: pointer;
				.bar{
					color: #7f7f7f;
				}
			}
			.popup{
				
				.popup-content {
					// display: flex;
					// flex-direction: column;
					// align-items: center;
					// justify-content: center;
					border-radius: 72rpx 72rpx 0 0;
					padding: 30rpx 45rpx 0;
					box-sizing: border-box;
					height: 804rpx;
					background-color: #fff;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					position: relative;
					.title{
						font-size: 32rpx;
						font-weight: 700;
						width: 100%;
						text-align: center;
					}
					.close{
						width: 32rpx;
						position: absolute;
						right: 45rpx;
						cursor: pointer;
						top: 38rpx;
					}
					
					.patientlists{
						margin-top: 60rpx;
						.patientlist{
							width: 660rpx;
							height: 92rpx;
							border-radius: 16rpx;
							padding: 0 30rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							background-color: rgba(230, 244, 255, 1);
							font-size: 28rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							margin-bottom: 40rpx;
							.patient_card{
								margin-left: 20rpx;
								color: #aaa;
							}
						}
					}
					.addpatient{
						width: 660rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #fff;
						background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
						background-size: cover;
						position: absolute;
						bottom: 40rpx;
					}
				}
			}
		}
		// 申请原因
		.application_reason{
			width: 100%;
			height: 442rpx;
			background-color: #fff;
			margin: 30rpx 0;
			padding: 28rpx 40rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #333;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
			.title{
				font-size: 32rpx;
				font-weight: 700;
			}
			.textarea-container{
				width: 100%;
				height: 302rpx;
				position: relative;
				.texterea{
					width: 100%;
					height: 302rpx;
					border-radius: 16rpx;
					background-color: #f2f2f2;
					font-size: 28rpx;
					margin-top: 28rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
				.character-count{
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					color: #aaa;
					font-size: 28rpx;
				}
			}
			
		}
		// 申请项目
		.applying_for{
			width: 100%;
			padding: 28rpx 40rpx 38rpx;
			box-sizing: border-box;
			background-color: #fff;
			font-size: 28rpx;
			color: #333;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
			.title{
				font-size: 32rpx;
				font-weight: 700;
			}
			.projectlists{
				.projectlist{
					padding-top: 40rpx;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #f2f2f2;
					.lineOne{
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.titleInfo{
							display: flex;
							height: 44rpx;
							align-items: center;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #000;
							.logo{
								width: 34rpx;
								height: 44rpx;
								line-height: 44rpx;
								border-radius: 4rpx;
								background-color: rgba(240, 245, 255, 1);
								color: #2F54EB;
								text-align: center;
								font-size: 24rpx;
							}
							.project_title{
								font-size: 32rpx;
								line-height: 44rpx;
								margin-left: 10rpx;
							}
						}
						.price{
							color: #FF4D4F;
						}
					}
					.amount{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						color: #7f7f7f;
						margin-top: 20rpx;
					}
					.tags{
						margin-top: 14rpx;
						display: flex;
						align-items: center;
						.tag{
							padding: 8rpx 9rpx;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							// line-height: 44rpx;
							background-color: rgba(240, 247, 255, 1);
							color: #007AFF;
							margin-right: 20rpx;
						}
					}
				}
			}
			.amount_to{
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #555;
				margin-top: 42rpx;
				text-align: right;
			}
		}
		// 确认申请
		.confirm{
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			.application{
				width: 670rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E7%A1%AE%E8%AE%A4/u2184.svg');
				background-size: cover;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}       
</style>
